<template>
  <div class="jnhfxq_box_jg">
    <div class="jnhfxq_box">
      <div class="jnhfxq_box_title">缴纳会费</div>
      <div class="jnhfxq_nr_box">
        <div class="jnhfxq_nr_box_input">
          <el-input
            placeholder="请输入单位"
            v-model="formData.mechanism_name"
            disabled
          >
            <template slot="prepend">单位：</template>
          </el-input>
        </div>
        <div class="jnhfxq_nr_box_input">
          <el-input
            placeholder="请输入会员号"
            v-model="formData.reg_code"
            disabled
          >
            <template slot="prepend">会员号：</template>
          </el-input>
        </div>
        <div class="jnhfxq_nr_box_input">
          <el-input placeholder="请输入年度" v-model="formData.year" disabled>
            <template slot="prepend">年度：</template>
          </el-input>
        </div>
        <div class="jnhfxq_nr_box_input">
          <el-input
            placeholder="请输入应缴总额"
            v-model="formData.money"
            disabled
          >
            <template slot="prepend">应缴总额：</template>
          </el-input>
        </div>

        <div class="jnhfxq_nr_box_input">
          <el-input
            placeholder="请输入应缴单位会费"
            v-model="formData.mechanism_money"
            disabled
          >
            <template slot="prepend">应缴单位会费：</template>
          </el-input>
        </div>
        <div class="jnhfxq_nr_box_input">
          <el-input
            placeholder="请输入应缴个人会费总额"
            v-model="formData.user_all_money"
            disabled
          >
            <template slot="prepend">应缴个人会费总额：</template>
          </el-input>
        </div>
        <div class="jnhfxq_nr_box_input">
          <el-input
            placeholder="请输入个人会费标准"
            v-model="formData.user_money"
            disabled
          >
            <template slot="prepend">个人会费标准：</template>
          </el-input>
        </div>
        <div class="jnhfxq_nr_box_input">
          <el-input
            placeholder="请输入应缴费总人数"
            v-model="formData.user_count"
            disabled
          >
            <template slot="prepend">应缴费总人数：</template>
          </el-input>
        </div>
      </div>
      <div class="jnhfxq_2_box">
        <p><span>*</span> 缴费人员：</p>
        <div class="table_item_hy">
          <el-table :data="formData.users" stripe fit>
            <el-table-column prop="realname" label="姓名"> </el-table-column>
            <el-table-column prop="status" label="缴费状态">
              <template slot-scope="scope">
                <span v-if="scope.row.status == 0">未缴纳</span>
                <span v-if="scope.row.status == 1">已缴费</span>
                <span v-if="scope.row.status == 2">缴费审核中</span>
                <span v-if="scope.row.status == 3">补缴审核中</span>
                <span v-if="scope.row.status == 4">审核不通过</span>
                <span v-if="scope.row.status == 5">补缴审核不通过</span>
              </template>
            </el-table-column>
            <el-table-column prop="email" label="邮箱"> </el-table-column>
            <el-table-column prop="code" label="证件号码"> </el-table-column>
            <el-table-column prop="user_cert_code" label="资格证号">
            </el-table-column>
            <el-table-column prop="mobile" label="电话"> </el-table-column>
          </el-table>
        </div>
      </div>
      <div class="jnhfxq2_pz">
        <div class="jnhfxq2_pz_title">上传凭证：</div>

        <div class="jnhfxq2_pz_upload" v-if="show == 0 || show == 3">
          <el-upload
            class="jnhfxq2_pz_uploadbox"
            :action="uploadurl"
            list-type="picture-card"
            :file-list="fileList"
            :on-success="handleSuccess"
            :on-preview="handlePictureCardPreview"
            :on-remove="handleRemove"
            :before-upload="beforeAvatarUpload"
          >
            <i class="el-icon-plus"></i>
          </el-upload>
          <el-dialog :visible.sync="dialogVisible">
            <img width="100%" :src="dialogImageUrl" alt="" />
          </el-dialog>
          <span class="uploadpz">不可为空，不上传不允许提交</span>
        </div>

        <div v-if="show == 1 || show == 2" style="display: flex">
          <el-image
            v-for="(item, index) in formData.payment_images"
            :key="index"
            style="width: 1.05rem; height: 0.925rem; margin-left: 0.25rem"
            :src="url + formData.payment_images[index]"
            :preview-src-list="imgurl(url + formData.payment_images[index])"
          >
          </el-image>
        </div>
      </div>

      <div class="button_box_hfxq2" v-if="show == 0 || show == 3">
        <el-button type="primary" @click="Submit()">提交</el-button>
      </div>
    </div>
  </div>
</template> 
  <script>
import env from "../../../env";

export default {
  data() {
    return {
      id: this.$route.query.id,
      formData: {},
      show: "", //审核状态
      dialogImageUrl: "",
      dialogVisible: false,
      fileList: [],
      uploadurl: env.API_BASE_URL + env.API_img_DURL,
      url: env.API_BASE_URL,
    };
  },
  mounted() {
    this.getinfo();
  },
  methods: {
    /**
     * 获取信息
     */
    getinfo() {
      let that = this;
      let data = {
        id: that.id,
      };
      that.$http.post("mechanism/fee_apply", data).then((res) => {
        if (res.code === 1) {
          that.show = res.data.status;
          that.formData = res.data;
        }
      });
    },
    imgurl(e) {
      let arr = [];
      arr.push(e);
      return arr;
    },

    /**
     * 上传申请
     */
    Submit() {
      let that = this;
      let arr = [];
      this.formData.users.forEach((item, index) => {
        arr.push(item.id);
      });
      let arrimg = [];
      that.fileList.forEach((item, index) => {
        arrimg.push(item.response.data.url);
      });
      let data = {
        id: that.id,
        money: that.formData.money,
        user_ids: arr.join(","),
        payment_images: arrimg.join(","),
      };
      let msgg = {
        code: 1,
        msg: "提交之后不可修改，请认真核对信息是否正确；<br/>提交之后请耐心等待管理员审核；<br/>审核结果请在“站内通知”查看。",
      };
      that.$self.ts(msgg, 2).then(() => {
        that.$http.post("mechanism/fee_apply_save", data).then((res) => {
          that.$self.ts(res, 3).then(() => {
            that.getinfo();
          });
        });
      });
    },
    /**
     * 上传凭证
     */
    handleSuccess(response, file, fileList) {
      // console.log(response, file, fileList)
      this.fileList = fileList.slice(-100);
      // console.log(this.fileList)
    },
    /**
     * 凭证预览
     */
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    /**
     * 上传删除
     */
    handleRemove(file, fileList) {
      this.fileList = fileList.slice(-100);
    },
    beforeAvatarUpload(file) {
      const typeArry = [".jpg", ".png", ".JPG", ".PNG", ".jpeg"];
      const type = file.name.substring(file.name.lastIndexOf("."));
      const isImage = typeArry.indexOf(type) > -1;

      const isLt2M = 0.4 < file.size / 1024 / 1024 < 0.6;

      if (!isImage) {
        this.$message.error("请上传图片");
      }
      if (!isLt2M) {
        this.$message.error("图片大小400-600k");
      }
      return isImage && isLt2M;
    },

    //  ==
  },
};
</script>
  <style>
.jnhfxq_box {
  background: #ffffff;
  border-radius: 0.125rem;
  box-shadow: 1px 1px 3px 2px rgba(0, 0, 0, 0.15);
  margin: 0.125rem 0.025rem 0.1rem 0.625rem;
  padding-bottom: 0.4875rem;
}
.jnhfxq_box_title {
  height: 0.9rem;
  text-align: center;
  line-height: 1rem;
  font-size: 0.25rem;
  font-weight: 400;
  color: #333333;
}
.jnhfxq_nr_box {
  width: 14rem;
  border-top: 0.0375rem dotted #dddd;
  margin: auto;
  font-size: 0.225rem;
  font-weight: 400;
  color: #333333;
  padding-top: 0.1375rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
}
.jnhfxq_nr_box_input {
  width: 48%;
  margin-top: 0.25rem;
}
.jnhfxq_box_jg .jnhfxq_nr_box_input .el-input-group__prepend {
  width: 147px;
}
.jnhfxq_2_box {
  width: 14rem;
  margin: 0.15rem auto 0;
  font-size: 0.225rem;
  font-weight: 400;
  color: #333333;
}
.jnhfxq_2_box .el-table__header thead th {
  background-color: #ebf2fc !important;
  height: 0.625rem;
  font-size: 0.2rem;
  font-weight: 400;
  color: #1954a4;
  line-height: 0.375rem;
  text-align: center;
}
.jnhfxq_2_box .el-table__body-wrapper tbody td {
  text-align: center;
}
.jnhfxq_2_box p {
  font-size: 0.2rem;
  font-family: Microsoft YaHei;
  font-weight: 400;
  line-height: 0.375rem;
  margin-bottom: 0.1625rem;
}
.jnhfxq_2_box p span {
  font-size: 0.2rem;
  color: #cd0000;
}
.button_box_hfxq2 .el-button {
  width: 2.5rem;
}
.button_box_hfxq2 {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 0.5rem;
}
.jnhfxq2_pz {
  display: flex;
  align-items: center;
  width: 14rem;
  margin: 0.2rem auto 0;
  border: 1px solid #e8eaee;
  height: 1.125rem;
}
.jnhfxq2_pz_title {
  width: 1.25rem;
  background: #f2f2f2;
  border-radius: 0.025rem 0px 0px 0.025rem;
  font-size: 0.2rem;
  font-weight: 400;
  color: #333333;
  line-height: 1.125rem;
  text-align: center;
}
.jnhfxq2_pz_upload {
  display: flex;
  align-items: center;
  padding-left: 0.275rem;
  box-sizing: border-box;
}
.jnhfxq2_pz_uploadbox .el-upload--picture-card {
  width: 0.8875rem;
  height: 0.8875rem;
  line-height: 1rem;
  background: #f2f2f2;
}
.jnhfxq2_pz_uploadbox .el-upload--picture-card i {
  font-size: 0.35rem;
}
.uploadpz {
  font-size: 0.175rem;
  font-weight: 400;
  color: #333333;
  margin-left: 0.1375rem;
}
.jnhfxq2_pz_uploadbox .el-upload-list--picture-card .el-upload-list__item {
  width: 0.9rem;
  height: 0.9rem;
}
.jnhfxq_nr_box .el-input.is-disabled .el-input__inner {
  background: #ffffff;
  color: #333333;
}
</style>
<style scoped>
::v-deep .el-table tr {
  font-size: 0.2rem;
}
::v-deep .el-button {
  font-size: 0.2rem;
}
</style>